<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">
        <div id="opinion-summary"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6">
          <div class="text-center font-bold text-xl mb-4">党内外群众意见表</div>
          <table class="w-full border-collapse text-sm">
            <tbody>
              <tr>
                <td class="p-2 w-[15%] font-bold border border-solid border-black">姓名</td>
                <td class="p-2 w-[35%] border border-solid border-black">{{ member.memberName }}</td>
                <td class="p-2 w-[15%] font-bold border border-solid border-black">所在班级</td>
                <td class="p-2 w-[35%] border border-solid border-black">{{ member.studentClass }}</td>
              </tr>
              <tr>
                <td class="p-2 font-bold border border-solid border-black">征求党内外群众意见形式</td>
                <td colspan="3" class="p-2 border border-solid border-black">☑座谈会 &nbsp;&nbsp;&nbsp;&nbsp;□走访调研</td>
              </tr>
              <tr>
                <td colspan="4" class="p-2 font-bold border border-solid border-black">（一）群众意见汇总</td>
              </tr>
              <tr>
                <td colspan="4" class="p-2 border border-solid border-black align-top h-full">
                  <div class="flex flex-col justify-between min-h-[400px]">
                    <div class="leading-relaxed">
                      <p><b>主题：</b>征求党内外群众对于{{ member.memberName }}同志入党的意见</p>
                      <p><b>时间：</b>{{  formatDate(member.massOpinion.signatureDate,'YYYY年MM月DD日')}}</p>
                      <p><b>地点：</b>信息B423</p>
                      <p><b>与会人员：</b>刘昊、宋鄂萱、姬凯然、吴若源、陈晗、马妍芳</p>
                      <p class="mt-2"><b>结论：</b>{{ member.memberName }}同志政治立场坚定，积极学习党的理论知识，主动向党组织靠拢，思想觉悟较高。在学习上，她勤奋刻苦，专业知识扎实，成绩优异，并积极参与科技竞赛和创新创业活动，展现了较强的专业能力和进取精神。作为班级双创委员，她工作认真负责，主动为同学提供竞赛指导和学习帮助，起到了良好的模范带头作用。生活中，她团结同学，待人真诚，乐于助人，具有良好的群众基础。</p>
                      <p class="mt-2">综合该同志在思想、学习、工作和生活等方面的表现，她已基本具备党员发展对象的条件，符合党员发展要求。</p>
                    </div>
                    <div class="self-end text-right mt-4">
                      <p class="mb-2 font-kaiti">党支部书记：{{ member.massOpinion?.branchSecretarySignature }}</p>


                      
                      <div class="flex items-center">
                          <n-tooltip v-if="getValidationInfo('signatureDate')" trigger="hover">
                            <template #trigger>
                              <n-icon :size="16" :color="getLevelColor(getValidationInfo('signatureDate').level)" class="mr-1.5">
                                <component :is="getIconComponent(getValidationInfo('signatureDate').level)" />
                              </n-icon>
                            </template>
                            <span>{{ getValidationInfo('signatureDate').message }}</span>
                          </n-tooltip>
                          {{ formatDate(member.massOpinion.signatureDate ,'YYYY年MM月DD日') || '（日期未填写）' }}
                        </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="discussion-records"
          class="mx-auto max-w-[500px] w-full min-w-[500px] bg-gray-50 shadow-lg rounded-md p-6">
           <div class="text-center font-bold text-xl mb-4">党内外群众意见表</div>
            <div class="p-2 font-bold border border-solid border-black text-sm">（二）走访调研及座谈会发言记录</div>
            <div class="border border-solid border-black border-t-0 p-4 space-y-4 text-sm">
                <div class="border-b pb-2">
                    <p><b>调研情况</b></p>
                    <p><b>调研人:</b> {{ member.memberName }} &nbsp;&nbsp; <b>群众姓名:</b> 张三 &nbsp;&nbsp; <b>所在班级:</b> 软件2307</p>
                    <p class="mt-1">该同学现实表现良好，学习态度认真，积极团结同学，表现出良好的学生品德。工作上，作为班级的一员，她认真履行校规班规，以身作则，为同学的好榜样。但是该同学仍然存在一些缺点，比如事情紧急时，沟通比较因为着急而生硬，还需提高一些临机处理事变的能力。我同意该同学成为发展对象。</p>
                </div>
                <div class="border-b pb-2">
                    <p><b>调研情况</b></p>
                    <p><b>调研人:</b> {{ member.memberName }} &nbsp;&nbsp; <b>群众姓名:</b> 李四 &nbsp;&nbsp; <b>所在班级:</b> 软件2307</p>
                    <p class="mt-1">在学习生活中，她认真钻研专业课内容，提升自己的专业能力；在日常生活中，她团结同学，乐于助人；同时，她还在班级内担任双创委员，工作认真负责，能够在科技竞赛创新创业方面为同学们提供帮助。但该同学在性格上比较含蓄内向，还需在与人沟通方面进行提高。我同意该同学成为发展对象。</p>
                </div>
                <div class="border-b pb-2">
                    <p><b>调研情况</b></p>
                    <p><b>调研人:</b> {{ member.memberName }} &nbsp;&nbsp; <b>群众姓名:</b> 王五 &nbsp;&nbsp; <b>所在班级:</b> 软件2307</p>
                    <p class="mt-1">这名同学平常表现优秀，学习上积极认真，专业知识扎实。生活上为人友善，待人真诚。作为双创委员，她积极履行职责，认真负责，在科技竞赛和创新创业方面给大家提供了很多的帮助。但是她为人比较内向，希望她未来能够在这方面有所改变。我同意该同学成为发展对象。</p>
                </div>
                <div>
                    <p><b>调研情况</b></p>
                    <p><b>调研人:</b> {{ member.memberName }} &nbsp;&nbsp; <b>群众姓名:</b> 赵六 &nbsp;&nbsp; <b>所在班级:</b> 软件2307</p>
                    <p class="mt-1">这名同学平常表现良好，学习上较为认真，勤奋刻苦，积极热心帮助同学，拥有比较丰富的专业知识。生活上团结他人，待人真诚。在科技竞赛和学习方面给大家提供了很多的帮助。 但是她在学习和生活上有些时候会有些大意，降低效率，希望她未来能够在这方面有所改变。 我同意该同学成为发展对象。</p>
                </div>
            </div>
        </div>
      </n-space>
    </div>


     <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
         <n-anchor :bound="500">
          <n-anchor-link title="（一）群众意见汇总" href="#opinion-summary" />
          <n-anchor-link title="（二）发言记录" href="#discussion-records" />
        </n-anchor>
      </div>
    </div>
    
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { NSpace, NAnchor, NAnchorLink, NAffix } from 'naive-ui';
import { formatDate } from '@/utils/dateUtils';
const documentContainer = ref(null);
import { getLevelColor,getIconComponent } from '@/utils/levelUtils';
const props = defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({ massOpinion: {} })
  },
   validation: { type: Array, default: () => [] },
});

const formattedSignatureDate = computed(() => {
    const dateStr = props.member.massOpinion?.signatureDate;
    if (!dateStr) return '';
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}年 ${month}月 ${day}日`;
});
function getValidationInfo(key) {
  if (!props.validation || !Array.isArray(props.validation)) {
    return null
  }
  return props.validation.find(item => item.key === key)
}
</script>